<!-- =========== 文章【管理】页面 =========== -->
<!-- ArticleManagementPage -->
<!-- article_management_page -->

<!-- 
  功能 ：
    1. 数据展示 getArticleRequest
    2. 数据编辑 updateArticleRequest
    3. 数据删除 delArticleRequest
-->

<script lang="ts" setup>
import { delArticleRequest, getArticleRequest, updateArticleRequest } from '@/api/manage_request'
import { inject, reactive, ref } from 'vue'

const article_list = ref<any>([])

interface i_articleDate {
  id: number
  title: string
  content: string
  status: boolean
}

// ================== 获取文章列表
async function lodeList() {
  const res = await getArticleRequest()
  article_list.value = res.data
}
lodeList()

// ================== 发布状态修改
async function updateStatus(item: i_articleDate) {
  item = { ...item, status: !item.status }
  console.log(item)
  const r = await updateArticleRequest(item)
  lodeList()
}

// ================== 编辑
const isShow = ref(false) // 显示编辑框
// 修改取消
function cancel() {
  isShow.value = false
}

const article = reactive({
  id: 0,
  title: '1',
  content: '',
  status: false
})

const updateArticle = (item: i_articleDate) => {
  isShow.value = true
  article.id = item.id
  article.title = item.title
  article.content = item.content
  article.status = item.status
}

// +++ 修改确认
async function updateConfirm() {
  isShow.value = false
  const r = await updateArticleRequest(article)
  console.log(r)
  lodeList()
}

// ==================== 删除
async function del(id: any) {
  console.log('del')
  const res = await delArticleRequest(id)
  console.log(res)
  lodeList()
}
</script>

<template>
  <div>用于文章==管理==的页面</div>
  <ul>
    <li v-for="item in article_list" :key="item.id">
      <p>{{ item.title }}</p>
      <p>{{ item.content }}</p>
      <p>公开：<input type="checkbox" :checked="item.status" @click="updateStatus(item)" /></p>
      <p>
        <button @click="updateArticle(item)">编辑</button>
        &nbsp;&nbsp;
        <button @click="del(item.id)">删除</button>
      </p>
    </li>
  </ul>

  <div class="popup_box" v-show="isShow">
    <div class="popup_main">
      <p>文章标题：<input type="text" v-model="article.title" /></p>
      <p>文章内容：<input type="text" v-model="article.content" /></p>
      <p>是否公开：<input type="checkbox" v-model="article.status" /></p>
      <p>
        <button @click="cancel">取消</button>
        &nbsp;&nbsp;
        <button @click="updateConfirm">确认</button>
      </p>
    </div>
  </div>
</template>

<style lang="css" scoped>
.popup_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  .popup_main {
    margin: auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
  }
}
</style>
